<template>
  <div>
    <el-container>
      <div class="logo"></div>
      <el-header>
        <el-menu
          :default-active="defaultUrl"
          router
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#333335"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item
            class="active"
            v-for="(item, i) in navList"
            :key="i"
            :index="item.name"
          >
            {{ item.navItem }}
          </el-menu-item>
        </el-menu>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      defaultUrl: "/api/index/1",
      // activeIndex2: "1",
      navList: [
        { name: "/index", navItem: "首页" },
        { name: "/agents", navItem: "房产经纪" },
        { name: "/category", navItem: "地产分类" },
        { name: "/page", navItem: "关于我们" },
      ],
    };
  },

  mounted() {
    let href = window.location.href;
    this.defaultUrl = href.split("/#")[1];
  },

  watch: {
    $router: "change",
  },
  methods: {
    change() {
      this.defaultUrl = this.$route.path;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = keyPath;
    },
  },
};
</script>

<style lang="less" scoped>
nav {
  display: flex;
}
/deep/.el-menu {
  text-align: center;
  // border-bottom: none;
}
ul {
  display: flex;
  justify-content: center;
}
.el-header {
  padding: 0;
  border-bottom: 1px solid #ccc;
}
.el-menu-item {
  font-size: 16px;
}
.el-menu-item {
  background-color: #489df9;
  border-bottom: none;
}
.el-menu-item.active:active {
  background-color: #489df9;
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
}

.nav {
  display: flex;
  width: 50%;
  margin: auto;
}
/deep/.logo {
  background: url(../assets/logo.png) no-repeat center center;
  background-size: 100%;
  background-color: #333335;
  width: 51px;
  height: 60px;
  margin-left: 650px;
  position: absolute;
  z-index: 99;
  line-height: 60px;
}
</style>